<template>
  <view class="channel-modal" v-if="visible" @click="closeModal">
    <view class="modal-content" @click.stop>
      <!-- 弹窗头部 -->
      <view class="modal-header">
        <text class="modal-title">选择充值平台：已选择{{ selectedPlatforms.length }}个</text>
        <view class="close-btn" @click="closeModal">
          <text class="close-icon">×</text>
        </view>
      </view>
      
      <!-- 充值平台选项列表 -->
      <view class="platform-list">
        <view class="platform-item" @click="selectPlatform('all')">
          <view class="radio-btn" :class="{ checked: selectedPlatforms.includes('all') }">
            <text class="check-icon" v-if="selectedPlatforms.includes('all')">✓</text>
          </view>
          <text class="platform-name">全部选择</text>
        </view>
        
        <view 
          class="platform-item" 
          :class="{ selected: selectedPlatforms.includes(channel.id) }" 
          v-for="channel in channelList" 
          :key="channel.id"
          @click="selectPlatform(channel.id)"
        >
          <view class="radio-btn" :class="{ checked: selectedPlatforms.includes(channel.id) }">
            <text class="check-icon" v-if="selectedPlatforms.includes(channel.id)">✓</text>
          </view>
          <text class="platform-name">{{ channel.channel }}</text>
        </view>
      </view>
      
      <!-- 完成按钮 -->
      <view class="complete-btn" @click="confirmSelection">
        <text class="btn-text">完成</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ChannelSelector',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    defaultSelected: {
      type: [String, Array],
      default: () => ['platform']
    }
  },
  data() {
    return {
      selectedPlatforms: [], // 改为数组支持多选
      channelList: [] // 渠道列表数据
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.selectedPlatforms = Array.isArray(this.defaultSelected) ? this.defaultSelected : [this.defaultSelected]
        this.getChannelList()
      }
    }
  },
  mounted() {
    this.getChannelList()
  },
  methods: {
    // 获取渠道列表
    async getChannelList() {
      try {
        const response = await uni.request({
          url: '/api/goods/channelList',
          method: 'GET'
        })
        
        const responseData = response[1] || response.data || response
        console.log('渠道列表接口返回数据:', responseData)
        
        if (responseData && responseData.code === 1 && Array.isArray(responseData.data)) {
          this.channelList = responseData.data.filter(item => item.status === 1 && item.isdelete === 0)
        } else {
          console.error('渠道列表数据格式异常:', responseData)
        }
      } catch (error) {
        console.error('获取渠道列表失败:', error)
      }
    },
    
    selectPlatform(platform) {
      if (platform === 'all') {
        // 全选/取消全选逻辑
        if (this.selectedPlatforms.includes('all')) {
          this.selectedPlatforms = []
        } else {
          const allChannelIds = this.channelList.map(channel => channel.id)
          this.selectedPlatforms = ['all', ...allChannelIds]
        }
      } else {
        // 单个平台选择逻辑
        const index = this.selectedPlatforms.indexOf(platform)
        if (index > -1) {
          this.selectedPlatforms.splice(index, 1)
          // 如果取消选择某个平台，同时取消全选
          const allIndex = this.selectedPlatforms.indexOf('all')
          if (allIndex > -1) {
            this.selectedPlatforms.splice(allIndex, 1)
          }
        } else {
          this.selectedPlatforms.push(platform)
          // 检查是否所有平台都被选中，如果是则自动选中全选
          const allChannelIds = this.channelList.map(channel => channel.id)
          if (allChannelIds.every(id => this.selectedPlatforms.includes(id))) {
            if (!this.selectedPlatforms.includes('all')) {
              this.selectedPlatforms.push('all')
            }
          }
        }
      }
    },
    closeModal() {
      this.$emit('close')
    },
    confirmSelection() {
      // 过滤掉'all'选项，只返回实际选中的渠道ID
      const filteredSelection = this.selectedPlatforms.filter(item => item !== 'all')
      this.$emit('confirm', filteredSelection)
      this.closeModal()
    }
  }
}
</script>

<style lang="scss" scoped>
.channel-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: -16.5rem;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  
  .modal-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
  
  .close-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .close-icon {
      font-size: 24px;
      color: #999;
      line-height: 1;
    }
  }
}

.platform-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.platform-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  
  &:last-child {
    border-bottom: none;
  }
  
  &.selected {
    .platform-info {
      .platform-name {
        color: #ff4757;
      }
    }
  }
  
  .radio-btn {
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    margin-right: 12px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    
    &.checked {
      border-color: #ff4757;
      background-color: #ff4757;
      
      .check-icon {
        color: #fff;
        font-size: 12px;
        font-weight: bold;
      }
    }
  }
  
  .platform-name {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
  }
  
  .platform-info {
    flex: 1;
    
    .platform-name {
      font-size: 14px;
      color: #333;
      margin-bottom: 4px;
      font-weight: 500;
    }
    
    .platform-desc {
      font-size: 12px;
      color: #666;
      line-height: 1.4;
      margin-bottom: 2px;
      display: block;
    }
    
    .platform-values {
      font-size: 12px;
      color: #666;
      line-height: 1.4;
      display: block;
    }
  }
}

.complete-btn {
  margin: 16px 20px 20px;
  background-color: #ff4757;
  border-radius: 25px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  
  .btn-text {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
  }
}
</style>